import React from 'react'; 

import '../assets/css/index.css'

class TODOList2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            list: [
                /* {
                    title: "录制nodejs", 
                    checked: false 
                },{
                    title: "录制vue", 
                    checked: false 
                },{
                    title: "录制ionic", 
                    checked: true 
                },{
                    title: "录制egg.js", 
                    checked: true 
                } */
            ] 
         };
    }
    
    onKeyUp = (e) => {
        if(e.keyCode == 13){
            var tempList = this.state.list ; 
            tempList.push({
                title: this.refs.title.value,
                checked: false
            }); 
            this.refs.title.value = '';
            
            this.setState({
                list: tempList
            }); 
            //缓存数据到本地storage
            localStorage.setItem('todolist', JSON.stringify(tempList));
        }
    }
    checkboxChange = (key)=>{
        var tempList = this.state.list ; 
        
        tempList[key].checked=!tempList[key].checked;
            
        this.setState({
            list: tempList
        });
        //缓存数据到本地storage
        localStorage.setItem('todolist', JSON.stringify(tempList));
    }

    removeData = (key) => {
        var tempList = this.state.list ; 
        
        tempList.splice(key, 1);
            
        this.setState({
            list: tempList
        });
        //缓存数据到本地storage
        localStorage.setItem('todolist', JSON.stringify(tempList));
    }

    componentDidMount() {
        var todolist = JSON.parse(localStorage.getItem('todolist'));
        if(todolist){
            this.setState({
                list: todolist
            });
        }
    }

    render() {
        return (
            <div>
                {/* <h2>React TodoList案例演示</h2> */}
                <header className="title">TODO List     <input ref="title" onKeyUp={this.onKeyUp}/> </header>
                <h2>待办事项</h2>
                <hr/>
                <ul className="list">
                {
                    this.state.list.map((value, key) => {
                        console.log(value)
                        if(!value.checked){
                            return (
                                <li key={key}>
                                <input type="checkbox" checked={value.checked} onChange={this.checkboxChange.bind(this, key)}/>
                                {value.title}----<button onClick={this.removeData.bind(this, key)}>删除</button>
                                </li>
                            )
                        }
                    })
                }
                </ul>
                <h2>已完成事项</h2>
                <hr/>
                <ul className="list">
                {
                    this.state.list.map((value, key) => {
                        if(value.checked){
                            return (
                                <li key={key}>
                                <input type="checkbox" checked={value.checked} onChange={this.checkboxChange.bind(this, key)}/>
                                {value.title}----<button onClick={this.removeData.bind(this, key)}>删除</button>
                                </li>
                            )
                        }
                    })
                }
                </ul>
            </div>
        );
    }
}

export default TODOList2;